<template>
<view class="container">
	 <view class="tab">	 
		   <u-tabs :list="list" @click="click"
		   :current="id"
		    :activeStyle="{
		   						color: '#007AFF',
		   								transform: 'scale(1.2)',
		   								fontSize:'25rpx'
		   					}"
		               :inactiveStyle="{
		   						color: '#606266',
		   						transform: 'scale(1)',
		   								fontSize:'25rpx'
		   					}"
		   ></u-tabs>
	 </view>
	 <view class="orderlist">
	 	<view class="orderbox" v-for="(item,index) in showlist" @click="orderdetail(item.id)">
			<block v-for="(item2,index2) in item.goodsList">
	 		<view class="left">
	 			<image :src="item2.picUrl" mode=""></image>
	 		</view>
			<view class="right">
				<view class="top">
					{{item2.goodsName}}
				</view>
				<view class="center">
					<view class="center-left">
						<block v-for="(item3,index3) in item2.specifications">
						<text>{{item3}}*{{item2.number}}</text>
						</block>
					</view>
					<view class="center-right">
						*{{item2.number}}
					</view>
				</view>
				
				<view class="buttom">
					<view class="price">
						￥{{item2.price}}  <text>{{item.orderStatusText}}</text>
					</view>
					<view class="del"  v-if="!item.handleOption.comment">
						<u-button text="评价" type="warning" hairline="false" shape="circle" @click="aftersale(item.id,item2.id)"></u-button>
					</view>
					<view class="del"  v-else>
						<u-button text="已评价" type="warning" hairline="false" shape="circle" disabled="true"></u-button>
					</view>
					<view class="del"  v-if="item.handleOption.delete||item.handleOption.refund">
						<u-button :text="item.handleOption.delete==true?'删除订单':'取消订单'" type="warning" hairline="false" shape="circle" @click="delcollect(item.id,index)"></u-button>
					</view>
					<view class="sure"  v-else>
						<u-button text="确定" type="warning" hairline="false" shape="circle" @click="readycollect(index)"></u-button>
					</view>
					
				</view>
			</view>
			</block>
	 	</view>
	 </view>
</view>	
</template>

<script>
	export default {
		data() {
			return {
				list:[
				{
                    name: '全部订单'
                }, {
                    name: '待付款'
                   
                }, {
                    name: '待发货'
                    
                }, {
                    name: '待收货'
                }, {
                    name: '待评价'
                }],
				showlist:[],
				id:0
			}
		},
		onLoad(options) {
					this.id=options.id
					this.getUrl(options.id>0?options.id:0)
		},
		methods: {
			getUrl(id){
				this.$get(this.API.orderlist,{
					showType:id
				}).then(res=>{
					console.log(res.data)
					for (let i = res.data.data.page; i <= res.data.data.pages; i++) {
						this.showlist=this.showlist.concat(res.data.data.list)
					}
					console.log('showlist',this.showlist)
				})
			},
			click(item){
				this.showlist=[]
				this.getUrl(item.index)
				this.id=item.index
				// console.log(item)
			},
			delcollect(id,index){
				//判断是否取消订单
				if(this.showlist[index].handleOption.refund==true){
					this.$post(this.API.orderrefund,{
						orderId:id
					}).then(res=>{
						uni.showToast({
							title: '退款取消成功',
							icon: 'none',
							duration: 2000
						});
						setTimeout(()=>{
							this.showlist=[]
							this.getUrl(this.id)
						},2000)
					})
				}
				//判断是否过期
				if(this.showlist[index].handleOption.delete==true){
					this.$post(this.API.orderdelete,{
						orderId:id
					}).then(res=>{
						uni.showToast({
							title: '删除成功',
							icon: 'none',
							duration: 2000
						});
						setTimeout(()=>{
							this.showlist=[]
							this.getUrl(this.id)
						},2000)
					})
				}
				
			},
		readycollect(index){
			//判断是否支付
			if(this.showlist[index].handleOption.cancel==true){
				this.$post(this.API.pay,{
					orderId:this.showlist[index].id
				}).then(res=>{
					uni.showToast({
						title:'支付成功',
						icon: 'success',
						duration: 2000
					});
					setTimeout(()=>{
						this.showlist=[]
						this.getUrl(this.id)
					},2000)
				})
				return true;
			}
			//判断是否收货
			if(this.showlist[index].handleOption.confirm==true){
				this.$post(this.API.orderconfirm,{
					orderId:this.showlist[index].id
				}).then(res=>{
					uni.showToast({
						title:'收货成功',
						icon: 'success',
						duration: 2000
					});
					setTimeout(()=>{
						this.showlist=[]
						this.getUrl(this.id)
					},2000)
				})
			}
		},
		aftersale(product,order){
			uni.navigateTo({
				url:'/pages/productcomment/productcomment?product='+product+'&order='+order
			})
		},
		orderdetail(id){
			// uni.navigateTo({
			// 	url:'/pages/orderdetail/orderdetail?id='+id
			// })
		}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		
		.tab{
			font-size: 20rpx;
			width: 100vw;
			position: sticky;
			top: 0;
			background-color: #fff;
			z-index: 999;
		}
		.orderbox{
			display: flex;
			.left{
				width: 30vw;
				image{
					width: 25vw;
					height: 15vh;
				}
			}
			.right{
				width: 70vw;
				display: flex;
				flex-direction: column;
				.top{
					font-size: 35rpx;
					font-weight: 900;
					margin: 20rpx 0;
				}
				.center{
					display: flex;
					justify-content: space-around;
					margin: 20rpx 0;
					.center-left{
						border: 1px solid #007AFF;
						padding: 0px 20rpx;
					}
				}
				.buttom{
					display: flex;
						align-items: center;
						.price{
							width: 50vw;
							text{
								padding-left:50rpx ;
								font-size: 30rpx;
							}
						}
						.del{
							margin-right: 20rpx;
						}
						.sure{
							margin-right: 20rpx;
							width: 15vw;
							button{
								padding: 0px 20rpx;
								border: none;
							}
						}
				}
			}
		}
	}
</style>
